<script setup lang="ts">
import { NForm } from "naive-ui";
// import { TodoForm } from "../types";
import { priorityOptions } from "../components/constant";
import { useTodosStore } from "../store";

const todosStore = useTodosStore();
// 自动导入
const router = useRouter();

const formRef = ref<InstanceType<typeof NForm>>();
  
  const formValues = todosStore.formValues

const rules = {
  title: [
    { required: true, message: "请输入标题", trigger: "blur" },
    {
      min: 3,
      max: 50,
      message: "长度在 3 到 50 个字符",
      trigger: "blur",
    },
  ],
  description: [{ required: true, message: "请输入内容", trigger: "blur" }],
};
//修改
const editTodo = async () => {
  //表单验证 validate
  await formRef.value?.validate()
  //发起请求并添加至 todos =>todosStore 全局状态管理
  const success = await todosStore.editTodo(formValues)
  if (success) router.push({ name: 'todo.list' })
}
</script>
<template>
  <NForm ref="formRef" :model="formValues" :rules="rules">
    <h1>新的代办</h1>
    <NFormItem path="title" label="Title">
      <NInput v-model:value="formValues.title" placeholder="please input your todo title" />
    </NFormItem>
    <NFormItem path="description" label="Description">
      <NInput type="textarea" :rows="10" v-model:value="formValues.description" />
    </NFormItem>
    <NFormItem label="Priority">
      <NSelect v-model:value="formValues.priority" :options="priorityOptions" />
    </NFormItem>
    <NButton class="w-full" size="large" type="primary" @click.prevent="editTodo">修改代办</NButton>
  </NForm>
</template>
